<template>
  <el-main>
    <div class="comName">企业名称： {{companyName}}</div>
    <div class="btn-box">
      <el-button @click="addGoodsPlan">新增商品计划</el-button>
    </div>
    <el-table :data="goodsPlanList">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="商品计划名称"></el-table-column>
      <el-table-column prop="goodsName" label="所属商品"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="undercarriage(scope.row)">{{scope.row.deleteFlag ? '上架': '下架'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demonstration-box" v-show="false">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
    </div>
    <el-dialog
      title="新增商品"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div class="list">
        <label for="" class="list-item require"><i>商品计划：</i></label>
        <el-input class="input-width" v-model="goodsName" placeholder="请输入内容"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <div style="text-align: center; margin-top: 10px">
      <el-button type="primary" @click="back" plain>返回</el-button>
    </div>
  </el-main>
</template>

<script>
const queryString = require('querystring')
const tips = ['操作成功, 请去信息复核页面查看'];
import page from 'data/page'
export default {
  name: 'goodsPlan',
  data() {
    return {
      companyName: this.$route.query.companyName,
      companyId: this.$route.query.companyId,
      goodsPlanList: [],
      currentPage: 1,
      goodsPlanInfo: [],
      dialogVisible: false,
      goodsName: '' // 商品名
    };
  },
  mixins: [page],
  created() {
    this.search();
  },
  methods: {
    edit(item) {
      this.goodsPlanInfo = item
    },
    undercarriage(item) {
      let { deleteFlag } = item;
      deleteFlag = !deleteFlag;
      this.api.delete(`/goodsPlan/${item.id}?upload=${deleteFlag}`).then((res) => {
        this.$message(res.message)
      }).catch((err) => {
        this.$message('返回数据格式错误，接口不通')
        // this.$message(err.data.message)
      })
      // let param = JSON.parse(JSON.stringify(item));
      // param.companyId = this.companyId;
      // param.deleteFlag = !param.deleteFlag;
      // param.reson = '商品计划上下架切换';
      // this.api.put('/goodsPlan', param, 'form').then((res) => {
      //   this.search();
      //   if(param.deleteFlag) return this.$message('上架成功');
      //   this.$message('下架成功');
      // }).catch((err) => {
      //   this.$message(err.data.message)
      // })
    },
    search() {
      const params = {
        companyId: this.companyId,
        // page: this.currentPage - 1,
        // size: 20
      };

      this.axios
        .get('/goodsPlan?' + queryString.stringify(params))
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.goodsPlanList = res.data.data;
            // this.setPage(res.data.data);
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    addGoodsPlan() {
      this.dialogVisible = true
    },
    confirm() {
      const params = {
        name: this.goodsName,
        companyId: this.companyId
      }
      this.axios.post('/goodsPlan', queryString.stringify(params)).then((res) => {
        const code = Number(res.data.code)
        if (code === 200) {
          this.$message(this.mes.success)
          this.dialogVisible = false
          this.search()
        } else {
          this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    },
    handleClose () {},
    back() {
      this.$router.back()
    }
  }
};
</script>

<style lang="less" scoped>
  .main{
    text-align: left;
  }
  .btn-box{
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  .comName{
    border-bottom: 1px solid #eee;
  }
  .com-input {
    width: 210px;
  }
  .list{
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  .list-item{
    display: inline-block;
    text-align: right;
    width: 120px;
    i{
      display: inline-block;
      font-style: normal;
    }
    &.require{
      i{
        position: relative;
        &::after{
          position: absolute;
          content: '*';
          color: red;
          left: -10px;
          top: 2px;
        }
      }
    }
  }
  .el-textarea,.el-select,.el-input{
    width: 400px;
  }
}
</style>
